<template>
  <div class="inputs">
    <input
      :class="{ error: !isValid }"
      :type="type"
      :placeholder="textPlaceholder"
      v-model="inputVal"
      @blur="showTips"
    />
  </div>
</template>

<script>
import { log } from "util";
export default {
  props: ["textPlaceholder", "type", "rule", "errMsg"],
  data() {
    return {
      inputVal: "",
      isValid: true
    };
  },
  watch: {
    inputVal(newVal) {
      //   console.log("输入的数据发生了变化");
      // const regExp = /\d{3}/;
      const regExp = new RegExp(this.rule);
      const errMsg = this.errMsg;
      this.isValid = regExp.test(newVal);
      //   console.log(isValid);
      if (!this.isValid) {
        console.log(this.isValid);
      }
      this.$emit("valChanged", newVal);
    }
  },
  methods: {
    showTips() {
      // 如果 isValid == false 就 log 出来
      if (!this.isValid) {
        // alert('输入框失去焦点, 数据依然不合法');
        console.log("输入框失去焦点, 数据依然不合法");
        this.$toast("数据不合法");
        // console.log(this.$axios);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.inputs {
  margin-left: 10.83vw;
  display: flex;
  justify-content: space-between;

  input {
    border: none;
    border-bottom: 1px solid #000;
    width: 77.78vw;
    height: 16.67vw;
    //   清除input框的聚焦边框
    outline: none;
    font-size: 5.56vw;
  }
  .error {
    border-bottom-color: red;
  }
}
</style>
